<!-- 抓娃娃 -->
<template>
	<view class="">
		<view class="hdtybox" :class="hdc">
			<topboxVue :tit="$t('hd.bt16')"></topboxVue>
			<view class="zwwbox">
				<view class="zwwbox-top">
					<view class="bj_between mb20">
						<view class="bj_left">
							<image src="/static/hd/djb.png" class="zwwbox-top-djb"></image>
							<NumVue :txt1="$t('menu.$')" class="f48 fwb" ref="numv"></NumVue>
						</view>
						<view class="zwwbox-top-btn" @click="getBonus">
							{{$t("zww.btn")}}
						</view>
					</view>
					<view class="zwwbox-top-jdt mb20">
						<view class="zwwbox-top-jdt-mt" :style="'width: '+jdm+'%;'"></view>
					</view>
					<view class="tc">
						<text>{{$t("zww.txt1")}}</text>
						<text class="cy">{{Number(info.bonus - friend_claw_money).toFixed(2)}}</text>
						<text>{{$t("zww.txt2")}}</text>
						<text>{{info.bonus}}</text>
					</view>
				</view>

				<view class="zwwbox-zm mb40">
					<view class="zwwbox-zm-g" :class="jwwc">
						<image src="/static/hd/zwwt.png" class="zwwbox-zm-g-z1"></image>
						<view class="zwwbox-zm-g-z2b bj_between">
							<image src="/static/hd/zwwl.png" :class="jwwl"></image>
							<image src="/static/hd/zwwr.png" :class="jwwr"></image>
						</view>
						<image src="/static/hd/q1.png" class="zwwbox-zm-g-qq" :class="jwwq"></image>
					</view>
					<image src="/static/hd/zww2.png" class="zwwbox-zm-wd lt0 w100 h100"></image>
					<view class="zwwbox-zm-qm">
						<view class="zwwbox-zm-qm-dd" :style="item.style" v-for="item in qlist">
							<image :src="item.url" :style="item.style2"></image>
						</view>

					</view>
				</view>

				<view class="bj_center mb20">
					<view class="zwwbox-btn bj_between" @click="tojww">
						<view class="zwwbox-btn-cs">
							X{{help_times}}
						</view>
						<view class="zwwbox-btn-txt">
							{{$t("zww.btn2")}}
						</view>
					</view>
				</view>

				<view class="tc f24 ca2 mb30">
					<text>{{$t("zww.tit1")}}</text>
					<text>{{formatTime(endtiem)}}</text>
				</view>

				<view class="zwwbox-fb bj_between mb30" @click="setfxgc(true)">
					<view>
						{{$t("zww.tit2")}}
					</view>
					<image src="/static/hd/zwwf.png" mode=""></image>
				</view>

				<view class="zwwbox-th tc">
					{{$t("zww.tit3")}}
				</view>
				<swiper :display-multiple-items="7" :vertical="true" :autoplay="true" :interval="3000" :circular="true"
					class="zwwbox-trbox">
					<swiper-item v-for="item in claw_list">
						<view class="zwwbox-tr bj_between tc">
							<view class="w50">
								{{item.claw_username}}
							</view>
							<view class="w60">
								{{item.meno}}
							</view>
							<view class="w30 fwb cy">
								{{$t("menu.$")}}{{item.money}}
							</view>
						</view>
					</swiper-item>
				</swiper>


			</view>

			<bottomVue></bottomVue>
			<zero-loading type="surround" v-if="loading"></zero-loading>
		</view>

		<!-- 分享盖层 -->
		<view class="zwwgcbox bj_center" v-if="fxgc">
			<view class="zwwgcbox-main dh_1">
				<view class="zwwgcbox-main-tit">
					<text>{{$t("zww.tit5")}}</text>
					<image src="/static/xx.png" class="zwwgcbox-main-tit-xx" @click="setfxgc(false)"></image>
				</view>
				<view class="zwwgcbox-main-info">
					<view class="f32 mb20 tc">
						{{$t("zww.tit6")}}
					</view>
					<view class="bj_center f48 fwb mb40">
						<image src="/static/hd/djb.png" style="width: 80rpx;margin-right: 20rpx;" mode="widthFix">
						</image>
						<text>{{$t("menu.$")}}</text>
						<text>{{friend_claw_money}}</text>
					</view>
					<view class="f28 mb30">
						{{$t("zww.tit7")}}
					</view>
					<view class="bj_between por mb20">
						<view class="poa bj_center w100" style="left: 0; top: 16rpx;">
							<view class="zwwgcbox-main-info-gg1"></view>
							<view class="zwwgcbox-main-info-gg0"></view>
						</view>
						<view class="por bj_sx">
							<image src="/static/hd/c1.png" class="zwwgcbox-main-info-chpic"></image>
							<view class="zwwgcbox-main-info-item">
								{{$t("zww.gt1")}}
							</view>
						</view>

						<view class="por bj_sx">
							<image src="/static/hd/c1.png" class="zwwgcbox-main-info-chpic"></image>
							<view class="zwwgcbox-main-info-item">
								{{$t("zww.gt2")}}
								<text class="cy">{{Number(info.bonus - friend_claw_money).toFixed(2)}}</text>
								{{$t("zww.gt2-2")}}
							</view>
						</view>

						<view class="por bj_sx">
							<image src="/static/hd/c0.png" class="zwwgcbox-main-info-chpic"></image>
							<view class="zwwgcbox-main-info-item">
								{{$t("menu.$")}}
								{{info.bonus}}
								{{$t("zww.gt3")}}
							</view>
						</view>

					</view>
					<view class="cy f28 mb20">
						{{$t("zww.tit8")}}
					</view>
					<view class="f28 mb20">
						{{$t("zww.tit9")}}
					</view>
					<view class="bj_between mb20">
						<view class="zwwgcbox-main-info-inp outdata">
							{{info.invite_url}}
						</view>
						<view class="zwwgcbox-main-info-btn" @click="seturl">
							{{$t("zww.btn3")}}
						</view>
					</view>
					<view class="f28 mb20">
						{{$t("zww.tit10")}}
					</view>
					<view class="bj_between">
						<view class="zwwgcbox-main-info-icobox tc" v-for="(item , i) in list">
							<image :src="'/static/fx/'+(i+1)+'.png'"></image>
							<view class="f20">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 结果弹窗 -->
		<view class="zwwgcbox bj_center" v-if="jggc">
			<view class="zwwgcbox-result dh_1">
				<image src="/static/hd/q1.png" class="zwwgcbox-result-qiu"></image>
				<view class="zwwgcbox-result-money">
					<image src="/static/hd/djb.png" class="zwwgcbox-result-money-icon"></image>
					<text class="zwwgcbox-result-money-txt">{{$t("menu.$")}}{{jgmoneny}}</text>
				</view>
			</view>
		</view>


		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		provide,
		onMounted
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import NumVue from '../common/Num.vue';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let numv = ref(null)
	let hdc = ref("hdpagein")
	let fxgc = ref(false)
	// 可用次数
	let help_times = ref(0)
	// 彩球集合
	let qlist = ref([])
	// 抓娃娃传动轴动画
	let jwwc = ref("")
	// 抓娃娃左边爪子动画
	let jwwl = ref("")
	// 抓娃娃右边爪子动画
	let jwwr = ref("")
	// 抓娃娃球的动画
	let jwwq = ref("")
	let loading = ref(false)
	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let list = ref([{
			name: "Facebook"
		},
		{
			name: "WhatsApp"
		},
		{
			name: "Telegram"
		},
		{
			name: "Instagram"
		},
		{
			name: "Twitter"
		},
		{
			name: "Kwai"
		},
	])

	// 已助力金额
	let friend_claw_money = ref(0)
	let info = ref({
		bonus: 0
	})
	// 活动结束时间
	let endtiem = ref(0)
	// 进度条百分比
	let jdm = ref(0)

	let claw_list = ref([])

	// 结果盖层
	const jggc = ref(false)
	const jgmoneny = ref(0)

	onShow(function() {
		createQQ();
		winit();
	})

	function winit() {
		loading.value = true
		common.clawMachineInit({
			code: getApp().globalData.code ? getApp().globalData.code : ""
		}).then(res => {
			loading.value = false
			info.value = res.data.data
			info.value.invite_url = info.value.invite_url + "&hd=zww";
			if (info.value.friend_claw_money) {
				friend_claw_money.value = info.value.friend_claw_money
			}
			endtiem.value = info.value.end_time
			help_times.value = info.value.help_times
			claw_list.value = info.value.claw_list
			jdm.value = info.value.process
			numv.value.startAnimation(friend_claw_money.value);
			setTimeout(function() {
				jssj();
			}, 1000)
		})

	}

	// 领取抓娃娃机奖励
	function getBonus() {
		if (jdm.value >= 100) {
			common.getClawMachineBonus({
				period: info.value.period,
			}).then(res => {
				console.log(res);
			})
		} else {

		}
	}

	function seturl() {
		uni.setClipboardData({
			data: info.value.invite_url,
			success: () => {
				uni.showToast({
					title: 'Sucesso'
				});
			},
			fail: () => {
				uni.showToast({
					title: 'Falha',
					icon: 'none'
				});
			}
		});
	}

	function setfxgc(v) {
		fxgc.value = v
	}

	function jssj() {
		if (endtiem.value > 0) {
			endtiem.value--
			setTimeout(function() {
				jssj();
			}, 1000)
		}
	}

	// 创建球
	function createQQ() {
		const r = 8
		for (var i = 0; i < r; i++) {
			const size = Number(6 + Math.random() * i + i).toFixed(0)

			for (var j = 0; j < size; j++) {
				let q = Number(Math.random() * 4 + 1).toFixed(0)
				q = q == 5 ? 1 : q

				const rotation = Math.random() * 360 // 初始旋转角度
				const scale = 1 - (0.1 * i)
				const x = ((658 * 0.8) / size) * j / scale
				let y = (0.4 * i) * 100 * -1 + (Math.random() * 0.9 * 60)
				y = y > 0 ? 0 : y
				const zindex = r - i

				let json = {}
				json.url = "/static/hd/q" + q + ".png";
				let style = {
					"transform": `scale(${scale}) translate(${x}rpx,${y}%)`,
					"z-index": zindex
				}
				let style2 = {
					"transform": `rotate(${rotation}deg)`
				}
				json.style = style
				json.style2 = style2
				qlist.value.push(json)
			}

		}
	}

	// 秒数换算成时间
	function formatTime(seconds) {
		const days = Math.floor(seconds / 86400);
		const hours = Math.floor((seconds % 86400) / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		const secs = seconds % 60;

		// 补零函数（两位数）
		const pad = (num) => num.toString().padStart(2, '0');

		return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
	}

	let ifact = ref(false)
	// 开始抓娃娃
	function tojww() {
		if (help_times.value == 0 || ifact.value || loading.value) {
			setfxgc(true)
			return;
		}
		loading.value = true
		common.ClawBegin({
			period: info.value.period,
			code: getApp().globalData.code ? getApp().globalData.code : ''
		}).then(res => {
			console.log(res);
			loading.value = false

			jgmoneny.value = res.data.data?.money || 0

			if (res.data.success) {
				help_times.value--
				zwwdh()
			} else {
				messageText.value = res.data.message
				msgType.value = "error"
				message.value.open();
			}
		})

	}

	function zwwdh() {
		ifact.value = true
		jwwc.value = "jwwdh"
		jwwl.value = "jwwldh"
		jwwr.value = "jwwrdh"
		jwwq.value = "jwwqqdh"
		setTimeout(function() {
			jwwc.value = ""
			jwwl.value = ""
			jwwr.value = ""
			jwwq.value = ""
			ifact.value = false
			// 结果弹窗
			jggc.value = true
			setTimeout(() => {
				jggc.value = false
				winit();
			}, 3000)
		}, 6000)
	}

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}
</script>

<style lang="scss">
	@media (min-width: 768px) {
		.zwwgcbox {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.zwwgcbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100%;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		// opacity: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		&-main {
			width: 698rpx;
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 20rpx;

			&-tit {
				position: relative;
				height: 112rpx;
				line-height: 112rpx;
				font-size: 36rpx;
				text-align: center;
				background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				&-xx {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 32rpx;
					top: 40rpx;
				}
			}

			&-info {
				padding: 40rpx 20rpx;

				&-icobox {
					width: 106rpx;
					color: #A2B5D5;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

				&-inp {
					width: 512rpx;
					height: 76rpx;
					line-height: 76rpx;
					background: #004316;
					border-radius: 12rpx;
					border: 2rpx solid #004316;
					padding: 0 24rpx;
				}

				&-btn {
					width: 124rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					background: #FFBE32;
					border-radius: 12rpx;
				}

				&-gg0 {
					width: 238rpx;
					height: 6rpx;
					background: #808080;
				}

				&-gg1 {
					width: 238rpx;
					height: 6rpx;
					background: #FFBE32;
				}

				&-chpic {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 14rpx;
				}

				&-item {
					width: 164rpx;
					height: 180rpx;
					background: #004316;
					border-radius: 20rpx;
					padding: 34rpx 16rpx 0;
					font-size: 22rpx;
					text-align: center;
				}
			}
		}

		// 结果
		&-result {
			width: 544rpx;
			height: 452rpx;
			background: url("/static/hd/zwwjg.png") no-repeat center center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			flex-direction: column;


			&-qiu {
				width: 140rpx;
				height: 140rpx;
				margin-top: 160rpx;
			}

			&-money {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				width: 100%;
				margin-top: 30rpx;

				&-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
				}

				&-txt {
					font-size: 48rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
	}


	.zwwbox {
		padding: 30rpx 20rpx;

		&-th {
			height: 96rpx;
			line-height: 96rpx;
			background: linear-gradient( 90deg, #00561D 0%, #007E2A 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-size: 36rpx;
		}

		&-trbox {
			width: 100%;
			height: 540rpx;
			background: #00561D;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}

		&-tr {

			height: 80rpx;
			font-size: 28rpx;
		}

		&-fb {
			height: 108rpx;
			background: #00561D;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #00561D;
			font-size: 32rpx;
			padding: 0 28rpx;

			image {
				width: 76rpx;
				height: 76rpx;
			}
		}

		&-zm {
			position: relative;
			width: 710rpx;
			height: 658rpx;
			background: url("/static/hd/zww3.png") no-repeat center center;
			background-size: 100% 100%;

			&-g {
				position: absolute;
				top: 50rpx;
				left: 50rpx;

				&-qq {
					position: absolute;
					width: 80rpx;
					height: 80rpx;
					top: 210rpx;
					left: calc(254rpx / 2 - 80rpx / 2);
					opacity: 0;
				}

				&-z1 {
					width: 254rpx;
					height: 190rpx;
				}

				&-z2b {
					position: absolute;
					width: 254rpx;
					left: 0;
					top: 174rpx;
					padding: 0 56rpx;

					image {
						width: 56rpx;
						height: 84rpx;
					}
				}
			}

			&-wd {
				position: absolute;
			}

			&-qm {
				position: absolute;
				width: 80%;
				height: 40%;
				left: 10%;
				bottom: 12%;

				&-dd {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 136rpx;
					height: 136rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		&-btn {
			width: 364rpx;
			height: 120rpx;
			background: url("/static/hd/zwwb.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 0 50rpx 50rpx;

			&-cs {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFBE32;
			}

			&-txt {
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		&-top {
			height: 280rpx;
			background: url("/static/hd/zww1.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 68rpx 64rpx 40rpx;
			font-size: 24rpx;
			margin-bottom: 30rpx;

			&-djb {
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
			}

			&-btn {
				width: 192rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				background: #F8C735;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 12rpx;
			}

			&-jdt {
				height: 20rpx;
				background: #444444;
				border-radius: 100rpx;
				position: relative;

				&-mt {
					position: absolute;
					left: 0;
					top: 0;
					height: 20rpx;
					background: #FFBE32;
					border-radius: 100rpx;
				}
			}
		}
	}

	.jwwdh {
		animation: jwwdhd 5s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes jwwdhd {
		0% {
			transform: translate(0, 0);
		}

		15% {
			transform: translate(260rpx, 0);
		}

		25% {
			transform: translate(130rpx, 0);
		}

		50% {
			transform: translate(130rpx, 100rpx);
		}

		75% {
			transform: translate(130rpx, 0);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	.jwwldh {
		animation: jwwldhd 2.5s 1 linear;
		animation-fill-mode: forwards;
		transform-origin: 26rpx 12rpx;
	}

	@keyframes jwwldhd {
		0% {
			transform: rotate(0);
		}

		80% {
			transform: rotate(25deg);
		}

		100% {
			transform: rotate(-15deg);
		}
	}

	.jwwrdh {
		animation: jwwrdhd 2.5s 1 linear;
		animation-fill-mode: forwards;
		transform-origin: 26rpx 12rpx;
	}

	@keyframes jwwrdhd {
		0% {
			transform: rotate(0);
		}

		80% {
			transform: rotate(-25deg);
		}

		100% {
			transform: rotate(15deg);
		}
	}

	.jwwqqdh {
		animation: jwwqqdhd 5s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes jwwqqdhd {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 0;
		}

		55% {
			opacity: 1;
		}

		100% {
			opacity: 1;
		}
	}
</style>